﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content=" Zoe" />
<meta name="Copyright" content="" />
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>产品详情</title>
<script type="text/javascript" src="js/food/jquery.min.js"></script>
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/styles.css" type="text/css">
<script type="text/javascript" src="js/food/jquery.min.js"></script>
  <script src="https://how2j.cn/study/vue.min.js"></script>
  <script src="https://how2j.cn/study/fetch.min.js"></script>
</head>
<body >
<style>
  h1{
    color: black;
    margin-top: 50px;
  }
</style>
<div class="wrap bc" id="detailId">
  <div class="title tc pr top"> <span class="back-btn"></span>食物详情 </div>
  <div class="content">
    <h1>食品名称：{{food.name}}</h1>
    <h1>食品单价:{{food.price}}</h1>
    <h1>会员折扣:{{food.memberDiscount}}</h1>
    <div class="article mt10 pro-detail">
      <img :src="food.remark" style="width: 200px;height: 200px"/>
      <a class="title book-btn mt10 tc" v-on:click="addCart(food.id)">加入购物车</a>
    </div>
    <h1 style="text-align: center;font-weight: bold">食品评论</h1>
    <ul style="height: 1000px">
      <li v-for="comment in comments" style="border: black">
           <h1><span v-if="comment.username==''||comment.username==null">
             匿名
           </span>
           <span v-else>
             {{comment.username}}
           </span>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;满意度:{{comment.status}}</h1>
           <h1 style="color: #0AA699">{{comment.message}}</h1>
      </li>
    </ul >
    服务满意度:
    <select v-model="status" style="height: 50px;width: 200px">
      <option value="五星">五星</option>
      <option value="四星">四星</option>
      <option value="三星">三星</option>
      <option value="二星">二星</option>
      <option value="一星">一星</option>
    </select>
    <input style="height: 50px;width: 200px" v-model="comment"/><button style="width: 70px;height: 50px" v-on:click="addComment()">添加评论</button>

  </div>
</div>
<script type="application/javascript">
  function getQueryVariable(variable)
  {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
    }
    return(false);
  }
  var id =getQueryVariable("foodId");

  new Vue({
    el:'#detailId',
    data:{
      food:{},
      comments:[],
      status:"",
      comment:""
    },
    mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
      self=this
      fetch("/Fore/food/findFoodById?id="+id).then(function(response) {
        response.json().then(function (jsonObject) {
          self.food = jsonObject
        })
      })
      fetch("/Fore/comment/findCommentsByFoodId?id="+id).then(function(response) {
        response.json().then(function (jsonObject) {
          self.comments = jsonObject
        })
      })



    },methods:{
      addCart:function (id) {
        if(confirm("是否要添加进购物车？")){
          fetch("/Fore/card/add?foodId="+id).then(function(response) {
            alert("添加成功!");
          })
        }
      },
      addComment:function () {
        fetch("/Fore/comment/add?foodId="+this.food.id+"&comment="+this.comment+"&status="+this.status).then(function(response) {
              window.location.reload();
        })
      }


    }
  })
</script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>